import { SEO } from '@/utils/seo'
import { Helmet } from '@umijs/max'
import { getArticles } from '@/apis'
import React, { useEffect, useState } from 'react'
import styles from './index.less'

// 省略文字，区分字母和文字
function truncateText(text: string, maxLength: number = 100): string {
  let result = ''
  let count = 0
  for (let i = 0; i < text.length; i++) {
    const char = text[i]
    if (/[a-zA-Z]/.test(char)) {
      count += 1
    } else {
      count += 2
    }
    if (count > maxLength) {
      break
    }
    result += char
  }
  // 只有大于 maxLength 的时候才显示省略号
  if (count > maxLength) {
    result += '...'
  }
  return result
}

const Articles = () => {
  const [articles, setArticles] = useState<any[]>([])
  useEffect(() => {
    getArticles().then((res) => {
      if (!res.error) setArticles(res.result)
    })
  }, [])

  const handleClick = (id: string) => {
    window.open(`https://blog.zusheng.cc/Blog/Detail?_id=${id}`, '_blank')
  }
  return (
    <>
      <SEO 
        title="文章 - Zusheng Studio"
        description="Zusheng Studio的文章集合，分享设计、摄影和创意领域的见解、技巧和经验。探索创意思维和实践。"
        keywords="Zusheng,文章,博客,设计思考,摄影技巧,创意写作,经验分享"
        url="https://zusheng.cc/articles"
      />
      {/* 添加文章集合的结构化数据 */}
      <Helmet>
        <script type="application/ld+json">
          {JSON.stringify({
            "@context": "https://schema.org",
            "@type": "Blog",
            "name": "Zusheng Studio文章",
            "description": "Zusheng Studio的文章集合，分享设计、摄影和创意领域的见解、技巧和经验。",
            "url": "https://zusheng.cc/articles",
            "blogPost": articles.map((article, index) => ({
              "@type": "BlogPosting",
              "headline": article.title,
              "datePublished": new Date(article.operate.releaseTime).toISOString(),
              "description": truncateText(article.content, 100),
              "keywords": article.tags.join(","),
              "url": `https://blog.zusheng.cc/Blog/Detail?_id=${article._id}`,
              "position": index + 1
            }))
          })}
        </script>
      </Helmet>
      <div className={styles.pageArticles + ' page'}>
        <div className={styles.content}>
          <ul className={styles.list}>
            {articles.map((item, index) => {
              return (
                <li className={styles.item} key={index} onClick={() => handleClick(item._id)}>
                  <div className={styles.titleTime}>
                    <span className={styles.title}>
                      {truncateText(item.title, 150)}&nbsp;&nbsp;-&nbsp;&nbsp;
                      <span>{item.tags.join(' · ')}</span>
                    </span>
                    <span className={styles.time}>
                      {new Date(item.operate.releaseTime).getFullYear()}
                    </span>
                  </div>
                  <p className={styles.articleContent}>{truncateText(item.content, 100)}</p>
                </li>
              )
            })}
          </ul>
        </div>
      </div>
    </>
  )
}

export default Articles
